<template>
  <view class="container">
    <!-- 头部标题栏 -->
    <view class="header">
      <text class="header-title">我的患者</text>
      <button class="add-btn" @click="goToAddPatient">
        <text class="add-icon">+</text>
        <text>添加患者</text>
      </button>
    </view>

    <!-- 顶部筛选区域 -->
    <view class="filter-section">
      <view class="search-bar">
        <input 
          class="search-input" 
          placeholder="搜索患者姓名或手机号"
          v-model="searchKeyword"
          @input="filterPatients"
        />
        <button class="search-btn" @click="performSearch">搜索</button>
      </view>
      
      <view class="filter-tabs">
        <view 
          v-for="filter in filterOptions" 
          :key="filter.key"
          class="filter-tab"
          :class="{ active: currentFilter === filter.key }"
          @click="applyFilter(filter.key)"
        >
          {{ filter.label }}
        </view>
      </view>
    </view>

    <!-- 患者统计概览 -->
    <view class="patient-stats">
      <view class="stat-item">
        <text class="stat-number">{{ patientStats.totalPatients }}</text>
        <text class="stat-label">患者总数</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ patientStats.completedAssessments }}</text>
        <text class="stat-label">已完成评估</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ patientStats.todayPending }}</text>
        <text class="stat-label">今日待处理</text>
      </view>
    </view>

    <!-- 患者列表 -->
    <view class="patient-list" v-if="filteredPatients.length > 0">
      <view 
        v-for="patient in filteredPatients" 
        :key="patient.patient_id" 
        class="patient-card"
        @click="viewPatientDetail(patient.patient_id)"
      >
        <!-- 患者头像和基本信息 -->
        <view class="patient-header">
          <image 
            class="avatar" 
            :src="patient.avatar || '/static/logo.png'"
            mode="aspectFill"
          ></image>
          <view class="patient-info">
            <view class="patient-name-row">
              <text class="patient-name">{{ patient.real_name }}</text>
              <text class="patient-gender-age">{{ patient.gender }} {{ patient.age }}岁</text>
            </view>
            <view class="patient-contact">
              <text class="phone-icon">📱</text>
              <text class="phone-number">{{ patient.phone }}</text>
            </view>
          </view>
        </view>

        <!-- 填表进度 -->
        <view class="progress-section">
          <view class="progress-header">
            <text class="progress-label">填表进度</text>
            <text class="progress-value" :class="getProgressClass(patient.completed_status)">
              {{ patient.completed_status }}
            </text>
          </view>
          
          <!-- 已完成的量表标签 -->
          <view class="scale-tags" v-if="patient.completed_scales && patient.completed_scales.length > 0">
            <view 
              v-for="scale in patient.completed_scales" 
              :key="scale" 
              class="scale-tag"
            >
              {{ scale }}
            </view>
          </view>
          <view v-else class="no-scales-text">暂无测评记录</view>
        </view>

        <!-- 绑定信息 -->
        <view class="patient-footer">
          <text class="bind-time">绑定时间：{{ formatDate(patient.bind_time) }}</text>
          <text class="latest-assessment">
            最近评估：{{ patient.latest_assessment_date || '暂无' }}
          </text>
        </view>
        
        <!-- 评估历史 -->
        <view class="assessment-history" v-if="patient.assessments && patient.assessments.length > 0">
          <text class="history-title">评估历史</text>
          <view class="history-list">
            <view 
              v-for="assessment in patient.assessments.slice(0, 3)" 
              :key="assessment.id" 
              class="history-item"
              @click.stop="viewAssessmentDetail(patient.patient_id, assessment.id)"
            >
              <text class="history-date">{{ formatDate(assessment.assessment_date) }}</text>
              <view class="primary-scale" v-if="getPrimaryScale(assessment).score > 0">
                <text class="scale-name">{{ getPrimaryScale(assessment).name }}</text>
                <text class="scale-score" :class="getScaleScoreClass(getPrimaryScale(assessment).key, getPrimaryScale(assessment).score)">
                  {{ getPrimaryScale(assessment).score }}分
                </text>
              </view>
              <text v-else class="no-assessment">暂无评估数据</text>
            </view>
          </view>
          <view v-if="patient.assessments.length > 3" class="more-history" @click.stop="viewAllAssessments(patient.patient_id)">
            <text>查看全部 {{ patient.assessments.length }} 条记录</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="action-btn evaluate-btn" @click.stop="startEvaluation(patient.patient_id)">
            开始评估
          </button>
          <button class="action-btn new-assessment-btn" @click.stop="createNewAssessment(patient.patient_id)">
            新建评估
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <image class="empty-image" src="/static/images/no-data.png" mode="aspectFit"></image>
      <text class="empty-text">还没有绑定患者</text>
      <text class="empty-hint">点击右上角"添加患者"按钮开始绑定</text>
      <button class="empty-add-btn" @click="goToAddPatient">立即添加</button>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { getBoundPatients, getPatientAssessments } from '../../utils/api/doctor.js';
import { getLoginStatus } from '../../utils/auth.js';
import { PageStackManager } from '../../utils/pageStack.js';

export default {
  data() {
    return {
      patients: [],
      loading: false,
      // 筛选相关数据
      searchKeyword: '',
      currentFilter: 'all',
      filterOptions: [
        { key: 'all', label: '全部' },
        { key: 'completed', label: '已完成' },
        { key: 'pending', label: '待处理' },
        { key: 'recent', label: '最近添加' }
      ],
      // 患者统计数据
      patientStats: {
        totalPatients: 0,
        completedAssessments: 0,
        todayPending: 0
      }
    };
  },
  
  computed: {
    // 筛选后的患者列表
    filteredPatients() {
      let filtered = this.patients;
      
      // 按搜索关键词筛选
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase();
        filtered = filtered.filter(patient => 
          patient.real_name.toLowerCase().includes(keyword) ||
          patient.phone.includes(keyword)
        );
      }
      
      // 按筛选条件筛选
      switch (this.currentFilter) {
        case 'completed':
          filtered = filtered.filter(patient => patient.completed_status === '3/3已完成');
          break;
        case 'pending':
          filtered = filtered.filter(patient => patient.completed_status !== '3/3已完成');
          break;
        case 'recent':
          // 按绑定时间排序，最新的在前
          filtered = [...filtered].sort((a, b) => new Date(b.bind_time) - new Date(a.bind_time));
          break;
        default:
          // 全部，不进行额外筛选
          break;
      }
      
      return filtered;
    }
  },
  
  onLoad() {
    this.checkDoctorAuth();
    this.loadPatients();
  },
  
  onShow() {
    // 每次显示页面时刷新患者列表
    this.loadPatients();
  },
  
  methods: {
    // 检查医生权限
    checkDoctorAuth() {
      const loginStatus = getLoginStatus();
      if (loginStatus.userType !== 'doctor') {
        uni.showToast({
          title: '仅医生可访问',
          icon: 'none'
        });
        setTimeout(() => {
          // 使用智能返回，避免页面栈为空时的错误
          const { PageStackManager } = require('../../utils/pageStack.js');
          PageStackManager.smartBack();
        }, 1500);
      }
    },
    
    // 加载已绑定患者列表
    async loadPatients() {
      try {
        this.loading = true;
        const response = await getBoundPatients();
        
        if (response.code === 200 && response.data) {
          this.patients = response.data.patients || [];
          
          // 为每个患者加载评估历史
          for (let patient of this.patients) {
            try {
              const assessmentResponse = await getPatientAssessments(patient.patient_id, 1, 10);
              if (assessmentResponse.code === 200 && assessmentResponse.data) {
                patient.assessments = assessmentResponse.data.list || [];
              }
            } catch (error) {
              console.error(`加载患者 ${patient.patient_id} 评估历史失败:`, error);
              patient.assessments = [];
            }
          }
          
          console.log('已绑定患者列表:', this.patients);
        } else {
          throw new Error(response.msg || '获取患者列表失败');
        }
      } catch (error) {
        console.error('加载患者列表失败:', error);
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
      
      // 加载患者统计数据
      this.loadPatientStats();
    },
    
    // 加载患者统计数据
    loadPatientStats() {
      // 模拟数据，实际应该从API获取
      this.patientStats = {
        totalPatients: this.patients.length,
        completedAssessments: this.patients.filter(p => p.completed_status === '3/3已完成').length,
        todayPending: this.patients.filter(p => p.completed_status !== '3/3已完成').length
      };
    },
    
    // 筛选患者
    filterPatients() {
      // 实时筛选功能，在computed中处理
    },
    
    // 执行搜索
    performSearch() {
      // 搜索功能，在computed中处理
    },
    
    // 应用筛选
    applyFilter(filterKey) {
      this.currentFilter = filterKey;
    },
    
    // 跳转到添加患者页面
    goToAddPatient() {
      console.log('🚀 goToAddPatient 被调用');
      // 跳转到搜索患者页面
      const { PageStackManager } = require('../../utils/pageStack.js');
      PageStackManager.smartNavigate('/pages/doctor/searchPatient');
    },
    
    // 查看患者详情
    viewPatientDetail(patientId) {
      const url = `/pages/patientAssessmentDetails/patientAssessmentDetails?patientUserId=${patientId}`;
      PageStackManager.navigateToDetail(url);
    },
    
    // 开始评估
    startEvaluation(patientId) {
      console.log('开始评估患者:', patientId);
      
      // 显示选择量表的对话框
      uni.showActionSheet({
        itemList: ['抑郁量表 (HAMD17)', '焦虑量表 (HAMA)', '狂躁量表 (YMRS)', '全部评估'],
        success: (res) => {
          const scaleIndex = res.tapIndex;
          
          switch (scaleIndex) {
            case 0: // 抑郁量表
              PageStackManager.smartNavigateWithTabBar(`/pages/yiYuLiangBiaoStarter/yiYuLiangBiaoStarter?patientId=${patientId}`);
              break;
            case 1: // 焦虑量表
              PageStackManager.smartNavigateWithTabBar(`/pages/jiaoLvLiangBiao/jiaoLvLiangBiao?patientId=${patientId}`);
              break;
            case 2: // 狂躁量表
              PageStackManager.smartNavigateWithTabBar(`/pages/kuangZaoLiangBiao/kuangZaoLiangBiao?patientId=${patientId}`);
              break;
            case 3: // 全部评估
              PageStackManager.smartNavigateWithTabBar(`/pages/yiYuLiangBiaoStarter/yiYuLiangBiaoStarter?patientId=${patientId}`);
              break;
          }
        }
      });
    },
    
    // 新建评估
    createNewAssessment(patientId) {
      console.log('为患者新建评估:', patientId);
      // 使用智能跳转系统跳转到新建评估页面
      const url = `/pages/scale/createAssessment/createAssessment?patientUserId=${patientId}`;
      PageStackManager.smartNavigateWithTabBar(url);
    },
    
    // 查看评估详情
    viewAssessmentDetail(patientId, assessmentId) {
      console.log('查看评估详情:', {patientId, assessmentId});
      
      // 检查参数
      if (!assessmentId) {
        uni.showToast({
          title: '该患者暂无评估记录',
          icon: 'none'
        });
        return;
      }
      
      const url = `/pages/patientAssessmentDetails/patientAssessmentDetails?patientUserId=${patientId}&assessmentId=${assessmentId}`;
      
      // 使用页面栈管理工具进行安全跳转
      PageStackManager.navigateToDetail(url);
    },
    
    // 查看所有评估记录
    viewAllAssessments(patientId) {
      console.log('🚀 viewAllAssessments 被调用:', patientId);
      // 使用智能跳转系统
      console.log('✅ 使用智能跳转系统跳转到患者评估页面');
      const url = `/pages/doctor/patientAssessments?patientId=${patientId}`;
      PageStackManager.smartNavigateWithTabBar(url);
    },
    
    // 格式化日期 - 修复iOS兼容性问题
    formatDate(dateString) {
      if (!dateString) return '未知';
      
      try {
        let date;
        
        // 处理不同的日期格式，确保iOS兼容性
        if (typeof dateString === 'string') {
          // 将 "YYYY-MM-DD HH:mm:ss" 格式转换为 "YYYY/MM/DD HH:mm:ss"
          const isoDate = dateString.replace(' ', 'T');
          date = new Date(isoDate);
        } else {
          date = new Date(dateString);
        }
        
        if (isNaN(date.getTime())) {
          return dateString;
        }
        
        // 使用iOS兼容的日期格式
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } catch (error) {
        console.error('日期格式化失败:', error);
        return dateString;
      }
    },
    
    // 获取进度样式类
    getProgressClass(status) {
      if (!status) return '';
      if (status.includes('3/3')) return 'progress-complete';
      if (status.includes('0/3')) return 'progress-none';
      return 'progress-partial';
    },

    // 获取主要量表信息 - 只显示最主要的量表
    getPrimaryScale(assessment) {
      const scales = [
        { key: 'hamd', name: '抑郁量表', score: assessment.hamd_total, status: assessment.hamd_status },
        { key: 'hama', name: '焦虑量表', score: assessment.hama_total, status: assessment.hama_status },
        { key: 'ymrs', name: '躁狂量表', score: assessment.ymrs_total, status: assessment.ymrs_status }
      ];

      // 筛选出已完成的量表
      const completedScales = scales.filter(scale => scale.status === 1 && scale.score > 0);

      if (completedScales.length === 0) {
        return { name: '无评估', score: 0, key: '' };
      }

      // 返回分数最高的量表
      const primaryScale = completedScales.reduce((prev, current) =>
        (prev.score > current.score) ? prev : current
      );

      return {
        name: primaryScale.name,
        score: primaryScale.score,
        key: primaryScale.key
      };
    },

    // 获取量表分数样式类
    getScaleScoreClass(scaleKey, score) {
      const classes = {
        hamd: {
          normal: score <= 7,
          mild: score > 7 && score <= 17,
          moderate: score > 17 && score <= 24,
          severe: score > 24
        },
        hama: {
          normal: score <= 7,
          mild: score > 7 && score <= 14,
          moderate: score > 14 && score <= 21,
          severe: score > 21
        },
        ymrs: {
          normal: score <= 7,
          mild: score > 7 && score <= 19,
          moderate: score > 19 && score <= 29,
          severe: score > 29
        }
      };

      if (!classes[scaleKey]) return 'score-normal';

      if (classes[scaleKey].severe) return 'score-severe';
      if (classes[scaleKey].moderate) return 'score-moderate';
      if (classes[scaleKey].mild) return 'score-mild';
      return 'score-normal';
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.add-btn {
  display: flex;
  align-items: center;
  background-color: #2db5a3;
  color: #fff;
  border-radius: 40rpx;
  padding: 12rpx 30rpx;
  font-size: 28rpx;
  border: none;
}

.add-btn::after {
  border: none;
}

.add-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
  font-weight: bold;
}

/* 筛选区域样式 */
.filter-section {
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  margin: 20rpx;
  padding: 25rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f1f3f4;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  background: #fff;
  border-radius: 15rpx;
  padding: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.search-input {
  flex: 1;
  padding: 18rpx 20rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: transparent;
  outline: none;
}

.search-input::placeholder {
  color: #adb5bd;
}

.search-btn {
  margin-left: 15rpx;
  padding: 16rpx 24rpx;
  background: linear-gradient(135deg, #2db5a3 0%, #26c6a0 100%);
  color: #fff;
  border-radius: 12rpx;
  font-size: 26rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(45, 181, 163, 0.3);
  transition: all 0.3s ease;
}

.search-btn:active {
  transform: scale(0.96);
  box-shadow: 0 1rpx 4rpx rgba(45, 181, 163, 0.4);
}

.filter-tabs {
  display: flex;
  gap: 15rpx;
  justify-content: space-around;
}

.filter-tab {
  padding: 12rpx 20rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 25rpx;
  font-size: 26rpx;
  color: #6c757d;
  transition: all 0.3s ease;
  border: 1rpx solid #dee2e6;
  position: relative;
  overflow: hidden;
}

.filter-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.filter-tab:active::before {
  left: 100%;
}

.filter-tab.active {
  background: linear-gradient(135deg, #2db5a3 0%, #26c6a0 100%);
  color: #fff;
  border-color: #2db5a3;
  box-shadow: 0 4rpx 12rpx rgba(45, 181, 163, 0.3);
  transform: translateY(-2rpx);
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 20rpx;
  height: 4rpx;
  background: #fff;
  border-radius: 2rpx;
}

/* 患者统计样式 */
.patient-stats {
  display: flex;
  background: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #2db5a3;
}

.stat-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 患者列表样式 */
.patient-list {
  padding: 20rpx 30rpx;
}

.patient-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.patient-card:active {
  transform: scale(0.98);
}

/* 患者头部信息 */
.patient-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  background-color: #f0f0f0;
}

.patient-info {
  flex: 1;
}

.patient-name-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.patient-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 15rpx;
}

.patient-gender-age {
  font-size: 26rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
}

.patient-contact {
  display: flex;
  align-items: center;
}

.phone-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.phone-number {
  font-size: 26rpx;
  color: #666;
}

/* 进度区域 */
.progress-section {
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.progress-label {
  font-size: 28rpx;
  color: #666;
}

.progress-value {
  font-size: 28rpx;
  font-weight: bold;
}

.progress-complete {
  color: #07c160;
}

.progress-partial {
  color: #ff9500;
}

.progress-none {
  color: #999;
}

/* 量表标签 */
.scale-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.scale-tag {
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
  font-size: 24rpx;
}

.no-scales-text {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  padding: 10rpx 0;
}

/* 患者底部信息 */
.patient-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.bind-time,
.latest-assessment {
  flex: 1;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.action-btn {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  border-radius: 8rpx;
  border: none;
  padding: 0;
}

.evaluate-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.evaluate-btn::after {
  border: none;
}

.new-assessment-btn {
  background: linear-gradient(135deg, #FF7A45 0%, #ff9a56 100%);
  color: white;
}

.new-assessment-btn::after {
  border: none;
}

/* 评估历史样式 */
.assessment-history {
  margin: 20rpx 0;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.history-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx;
  background-color: #fff;
  border-radius: 8rpx;
  border: 1rpx solid #e8e8e8;
  transition: all 0.2s;
}

.history-item:active {
  background-color: #f0f0f0;
  transform: scale(0.98);
}

.history-date {
  font-size: 26rpx;
  color: #666;
}

.primary-scale {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.scale-name {
  font-size: 24rpx;
  color: #666;
}

.scale-score {
  font-size: 24rpx;
  font-weight: bold;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  min-width: 60rpx;
  text-align: center;
}

.score-normal {
  color: #52c41a;
  background-color: #f6ffed;
}

.score-mild {
  color: #faad14;
  background-color: #fffbe6;
}

.score-moderate {
  color: #fa8c16;
  background-color: #fff7e6;
}

.score-severe {
  color: #f5222d;
  background-color: #fff1f0;
}

.no-assessment {
  font-size: 24rpx;
  color: #999;
}

.more-history {
  text-align: center;
  padding: 15rpx;
  color: #FF7A45;
  font-size: 26rpx;
  margin-top: 10rpx;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 60rpx;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 40rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.empty-hint {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 40rpx;
  text-align: center;
}

.empty-add-btn {
  background-color: #2db5a3;
  color: #fff;
  border-radius: 40rpx;
  padding: 20rpx 60rpx;
  font-size: 28rpx;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}
</style>

